<template>
<div class="swiper_lunbo">
      	<div class="swiper-container  swiper-no-swiping kerwin">
			<div class="swiper-wrapper">
				<div class="swiper-slide" v-for="(item,i) of swiperList" :key="i">
                <a :href="item.link" style="display:block">
                    <img :src="item.url" alt="">
                     <div class="swiper_inner">
                        <!-- 标题 -->
                        <div class="title"  :style="setInner(item.titleStyle)">
                            {{item.title}}  
                        </div>
                        <!-- 副标题 -->
                        <!-- <div class="subtitle">{{item.subtitle}}</div> -->
                        <!-- 介绍contentStyle -->
                        <div class="swiper_cont" :style="{'margin-top':item.contentStyle['margin-top']+'rem','margin-left':item.contentStyle['margin-left']+'rem','margin-right':item.contentStyle['margin-right']+'rem',color:item.contentStyle.color,'font-size':item.contentStyle.fontSize+'rem','padding-top':item.contentStyle.paddingAlign+'rem','padding-bottom':item.contentStyle.paddingAlign+'rem','padding-left':item.contentStyle.paddingBetween+'rem','padding-right':item.contentStyle.paddingBetween+'rem','border':item.contentStyle.borderWidth+'rem ' + ' solid #fff'}" v-if="item.content">{{item.content}}</div>
                     </div>
                 </a>
                </div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>
			<!-- 如果需要导航按钮 -->
			<div class="swiper-button-prev" style="width:4%;min-width:35rem;left:8%!important;"> 
               <svg t="1656919291210" class="swiper_icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4264"><path d="M511.1 511.1l1.8 1.8-1.8-1.8zM513.1 510.9l-2.2 2.2c0.8-0.7 1.5-1.4 2.2-2.2z"  p-id="4265"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m116.8 659c-12.5 12.4-32.9 12.4-45.3 0L417.8 557.3l-21.5-21.5-2.2-2.2c-5.2-5.7-8.3-13.2-8.3-21.5-0.1-8.4 3.1-16.1 8.4-21.8l1.8-1.8 21.8-21.8L583.5 301c12.4-12.5 32.8-12.5 45.2-0.1 12.4 12.5 12.4 32.9 0 45.3L463 512l165.8 165.7c12.4 12.5 12.4 32.9 0 45.3z" fill="#bfc9d4" p-id="4266"></path></svg>
            </div>
			<div class="swiper-button-next"  style="width:4%;min-width:35rem;right: 8%!important;">
                 <svg t="1656919329338" class="swiper_icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5188" ><path d="M511.1 511.1l1.8 1.8-1.8-1.8zM513.1 510.9l-2.2 2.2c0.8-0.7 1.5-1.4 2.2-2.2z"  p-id="5189"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m117.8 469.6l-2.2 2.2-21.5 21.5L440.4 723c-12.4 12.4-32.8 12.4-45.3 0-12.4-12.4-12.4-32.8 0-45.3L560.9 512 395.2 346.2c-12.4-12.4-12.4-32.8 0-45.3 12.4-12.4 32.8-12.4 45.2 0.1l165.7 165.7 21.8 21.8 1.8 1.8c5.3 5.7 8.5 13.4 8.4 21.8 0 8.3-3.1 15.8-8.3 21.5z" fill="#bfc9d4" p-id="5190"></path></svg>
            </div>

			<!-- 如果需要滚动条-->
			<!-- <div class="swiper-scrollbar"></div> -->
		</div>
 </div> 
</template>

<script>
import { string } from 'mathjs'
export default {
    props: {
        propValue: {
            type: String,
            default: () => {},
        },
        swiperList: {
            type: Array,
            default: () => {},
        },
        element: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
        }
    },
    created(){
    },
    mounted(){
        new Swiper(".kerwin", {
				// direction: 'vertical', // 垂直切换选项
                watchSlidesVisibility: true /*避免出现bug*/,
				loop: true, // 循环模式选项
                  observer: true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents: true,//修改swiper的父元素时，自动初始化swiper
				//自动切换
                autoplay:false,
				// 如果需要分页器
				pagination: {
					el: '.swiper-pagination',
				},

				// 如果需要前进后退按钮
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				}
			})
    },
    methods:{
        setInner(item){
            console.log(item,'样式配置')
            let setStyle= Object.assign({},item)  
            for(var key in setStyle){
                if(['fontSize','margin-top','margin-left'].includes(key)){
                     setStyle[key]= setStyle[key]+'rem'
                }
            }
            return setStyle
            // return {"color":"#f40!important"}
        },
    },
}
</script>
<style>
.swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 33rem;
}
    .swiper-pagination-bullet-active,.swiper-pagination-bullet{
        width: 10rem;
        height: 10rem;
        margin-bottom: 40px;
    background: #fff; 
    }
</style>
<style lang="scss" scoped>
      .swiper_lunbo .swiper-container {
            /* width: 100%!important; */
            height: 100%;
            --swiper-navigation-size:0;
        }
        .swiper_lunbo .swiper-slide{
            width: 100%!important;
            height: 100%;
        }
       .swiper_lunbo .swiper-slide img{width:100%;height:100%}
       .swiper_lunbo .swiper-container .rot,
       .swiper_lunbo .swiper-container .rat {
        opacity: 0;
        }
       .swiper_lunbo .swiper-container .rot:hover,
      .swiper_lunbo  .swiper-container .rat:hover {
        opacity: 1;
        }
      .swiper_lunbo  .swiper_icon{
            opacity: 0.6;
            width: 100%;
        }
       .swiper_lunbo .swiper_icon:hover{
            opacity: 0.9;
        }
        .swiper_inner{
            position: absolute;
            z-index: 99;
            top:40%;
            left: 16%;
            // width: 43%;
            color:#fff;
            .title{
                font-size: 48px;
                margin-left: 60px;
            }
            .subtitle{
                font-size: 20px;
                margin: 10px auto;
            }
            .swiper_cont{
                font-size: 28px;
                // border: 1px solid #fff;
                // padding: 20px 45px;
                line-height: 1.5;
                border-radius: 100px;
                margin-top: 30px;
            }
        }
</style>
